<template>
  <template v-if="!widgetData.options.hidden">
    <el-form-item
      v-if="!isWidget(widgetData.type)"
      class="ex-widget-form_item"
      :label="widgetData.options.label"
      :required="widgetData.options.required"
      :prop="widgetData.options.name"
      :label-width="widgetData.options.labelWidth"
      @click.prevent="onclickItem(widgetData)"
    >
      <component
        v-if="widgetData.type"
        @click.stop
        :is="`el-${widgetData.type}`"
        v-model="formData[widgetData.options.name]"
        v-bind="widgetData.options"
        :teleported="false"
      />
      <slot v-else></slot>
    </el-form-item>
    
    <component
      v-else
      :is="`${widgetData.type}-widget`"
      :widget-data="widgetData"
      @click.prevent="onclickItem(widgetData)"
    />
  </template>
</template>

<script setup lang="ts">
import { CUSTOM_LIST } from "/@/components/fromDesigner/core";
import { renContainerProps } from "./container";

defineProps(renContainerProps);

const isWidget = (type: string) => {
  return CUSTOM_LIST.includes(type);
};
const onclickItem = (item: any) => {
  console.log(item)
}
</script>
